mdl-layout {
  mdl-layout-content {
    mdl-card{
      border-radius: 25px;
      mdl-card-title{
        background-color: #18db90;
      }
      mdl-card-supporting-text{
        width: 100%;
      }
    }
    .content-background{
      background-image: url("../../../../assets/images/login/default.jpg");
      filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
      -moz-background-size: 100% 100%;
      background-size: 100% 100%;
      position: fixed;
      width: 100%;
      height: 100%;
    }
    .tools-item{
      width:100%;
      position: absolute;
      height: 60px;
      bottom: 30px;
      :hover{
        background-color: black;
      }
      .icon-item{
        margin-left: 40px;
        float: left;
        border:2px solid #F8F8F8;
        border-radius: 50%;
        text-align: center;
        height: 40px;
        width: 40px;
        i{
          margin-top: 8px;
          font-size: 26px;
          color:#F8F8F8;
        }
      }
    }
    .app-qrcode-area{
      display: none;
      .app-qrcode{
        overflow: hidden;
        width:120px;
        height:120px;
        margin-left: 85px;
        bottom: 150px;
        position: absolute;
        border: 2px solid white;
        border-radius: 10px;
        img{
          width:120px;
          height:120px;
        }
      }
      .app-qrcode-bar{
        border: 1px solid white;
        bottom: 90px;
        margin-left: 145px;
        position: absolute;
        height: 58px;
      }
    }
    .app-bgimage-detail{
      position: absolute;
      top: 0px;
      width: 400px;
      height: 100%;
      left: -400px;
      background-color: rgba(0, 0, 0, 0.62);
      transition:all 1s ease;
      .app-bgimage-image{
        margin-left:40px;
        margin-top:30px;
        img{
          width:320px; 
          height:220px;
          border-radius: 15px;
        }
      }
      .app-bgimage-title{
        font-size: 24px;
        font-weight: 600;
        margin-top: 30px;
        color: white;
        line-height: 30px;
        text-align: center;
      }
      .app-bgimage-desc{
        font-size: 14px;
        color: white;
        margin: 20px 20px;
        height: calc(100% - 450px);
        overflow-y: auto;
      }
    }
    .footer{
      text-align: center;
      font-family: "Segoe UI",Segoe,Tahoma,Arial,Verdana,sans-serif;
      font-style: normal !important;
      color:#9a9a9a;
      width:100%;
      position: absolute;
      height: 20px;
      bottom: 0px;
      background-color: #333;
    }

  }
  mdl-card {
    margin-left: 50%;
    margin-top: 10%;
  }
  mdl-card-actions {
    .status-info{
      position: absolute;
      margin-top: -30px;
      margin-left: 5px;
    }
    button{
      float: right;
      margin-right: 10px;
    }
  }
  mdl-card-menu{
    i{
      font-size: 24px;
    }
  }
}
